<template>
	<view class="custom_shuttle">
		<!-- 智慧巴士页 -->
		<view class="btn">
			<button type="primary" @click="goStep1">定 制 班 车</button>
			<button type="primary" plain @click="goOrder">我 的 订 单</button>
		</view>
		
		<view v-for="(item,index) in list" :key="item.id" class="list">
			<view>路线名称：<text>{{item.name}}</text></view>
			<view>运行时间：<text>{{item.startTime}} — {{item.endTime}}</text></view>
			<view>起 始 点 ：<text>{{item.first}} —> {{item.end}}</text></view>
			<view>票 价 ：<text>{{item.price}}元</text></view>
			<view>里 程 ：<text>{{item.mileage}}KM</text></view>
			
			<view v-if="isShow&&index==selIndex" class="detail">
				<view>详细站点：</view>
				<scroll-view scroll-x="true">
					<!-- 这里是展开才能看到的内容 -->
					<!-- api接口有问题所以只能在页面中进行判断，显示对应的数据 -->
					<view class="" v-for="item2 in listDetail" :key="item2.id" v-if="item2.linesId==item.id">
						<text>{{item2.name}}</text>
					</view>
				</scroll-view>
			</view>
			
			<view class="more" 
					v-if="!(isShow&&index==selIndex)" 
					@click="changeStatus(index,true)">\/ 展 开</view>
			<view class="more" 
					v-if="isShow&&index==selIndex" 
					@click="changeStatus(index,false)">/\ 收 起</view>
		</view>
	</view>
</template>

<script>
	import {http} from "../../utils/request.js"
	export default {
		data() {
			return {
				list:[],
				listDetail:[],
				isShow:false,
				selIndex:0
			};
		},
		onLoad() {
			this.getList()
			this.getDetail()
		},
		methods:{
			// 获取路线列表
			getList(){
				http({
					url:"/prod-api/api/bus/line/list"
				}).then(res=>{
					if(res.data.code==200){
						this.list=res.data.rows
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:"none"
						})
					}
				})
			},
			// 获取站点信息
			getDetail(){
				http({
					url:"/prod-api/api/bus/stop/list",
					// api接口有问题,传linesId没有返回对应的数据
					// linesId:1
				}).then(res=>{
					if(res.data.code==200){
						this.listDetail=res.data.rows
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:"none"
						})
					}
					
				})
			},
			// 展开和收起按钮的显示与隐藏
			changeStatus(index,e){
				this.isShow=e
				this.selIndex=index
			},
			// 跳转到step1页
			goStep1(){
				uni.navigateTo({
					url:"/pages/bus_query/step1"
				})
			},
			// 跳转到我的订单页
			goOrder(){
				uni.navigateTo({
					url:"/pages/bus_query/order"
				})
			}
		}
	}
</script>

<style lang="scss">
.custom_shuttle{
	padding: 40rpx;
	.btn{
		display: flex;
		justify-content: space-between;
		button{
			width: 47%;
			margin: 0;
			border-radius: 20rpx;
		}
		button::after{
			border: 0;
		}
	}
	.list{
		background-color: #f8f8f8;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 40rpx;
		view{
			font-weight: normal;
			text{
				font-weight: bold;
			}
		}
		.more{
			text-align: center;
			font-size: 26rpx;
			background-color: #ccc;
			color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			margin-top: 20rpx;
		}
		.detail{
			display: flex;
			align-items: center;
			scroll-view{
				width: 50%;
				flex: 1;
				white-space: nowrap;
					
				// 网上复制的代码（去除滑动显示条）
				/deep/ ::-webkit-scrollbar{
					width: 4px !important;
					height: 1px !important;
					overflow: auto !important;
					background: transparent !important;
					-webkit-appearance: auto !important;
					display: block;
				}
						
				view{
					display: inline-block;
					padding: 10rpx 10rpx 10rpx 0;
				}
				view:not(:last-child){
					text:after{
						content: " >>>";
					}
				}
			}
		}
	}
}
</style>
